<template>
  <div>
  <el-table
    :data="list"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="recommend"
      label="ishot">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.ishot"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"

        ></el-switch>
      </template>

    </el-table-column>

  </el-table>
  </div>
</template>

<script>
import cityApi from '@/api/city'

export default {

  data() {
    return {
      list: null,
      listLoading: true,
      value: true,

    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      cityApi.getList(this.listQuery).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    }

  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
